<template>
    <div class="app-container">
        <h2 style="text-align: center;">发布新课程</h2>
        <el-steps :active="2" process-status="wait" align-center style="marginbottom: 40px;">
            <el-step title="填写课程基本信息"/>
            <el-step title="创建课程大纲"/>
            <el-step title="最终发布"/>
        </el-steps>

        <el-button type="text" @click="dialogChapterDialog()">添加章节</el-button>

        <!-- 章节 -->
        <ul>
            <li v-for="chapter in chapterVideoList" :key="chapter.id">
                <p>
                    {{chapter.title}}
                    <span class="acts">
                        <el-button type="text" style="" @click="openEditChapter(chapter.id)">编辑</el-button>
                        <el-button type="text">删除</el-button>
                    </span>
                </p>
                <!-- <ul>
                    <li v-for="video in chapter.children" :key="video.id">
                        {{video.title}}
                    </li>
                </ul> -->
            </li>
        </ul>

        <!-- <el-form label-width="120px">
            <el-form-item>
                <el-button @click="previous">上一步</el-button>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
            </el-form-item>
        </el-form> -->

        <div>
            <el-button @click="previous">上一步</el-button>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
            
        </div>

        <!-- 添加和修改章节表单 -->
        <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
            <el-form :model="chapter" label-width="120px">
                <el-form-item label="章节标题">
                    <el-input v-model="chapter.title"/>
                </el-form-item>
                <el-form-item label="章节排序">
                    <el-input-number v-model="chapter.sort" :min="0" controlsposition="right"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import chapter from '@/api/edu/chapter'
export default {
    data() {
        return {
            saveBtnDisabled:false,
            chapterVideoList:[],
            courseId:'',//课程id
            chapter:{//封装章节数据
                title:'',
                sort:0
            },
            dialogChapterFormVisible:false//是否显示章节弹框
        }
    },
    created() {
        if(this.$route.params && this.$route.params.id){
            this.courseId=this.$route.params.id
            this.getChapterVideo(this.courseId)
        }
    },
    methods:{
        //修改章节弹框数据回显
        openEditChapter(chapterId){
            //弹框
            this.dialogChapterFormVisible = true
            //调用接口
            chapter.getChapter(chapterId)
                .then(response => {
                    this.chapter = response.data.chapter
                })
        },
        //弹出添加章节页面
        dialogChapterDialog(){
            //弹框
            this.dialogChapterFormVisible = true
            //清空表单数据
            this.chapter.title=''
            this.chapter.sort=0
        },
        //添加章节
        addChapter(){
            this.chapter.courseId=this.courseId
            chapter.addChapter(this.chapter)
                .then(response => {
                    //关弹窗
                    this.dialogChapterFormVisible=false
                    //提示
                    this.$message({
                        type: 'success',
                        message: '添加章节成功'
                    })
                    //刷新页面
                    this.getChapterVideo()
                })
        },
        //修改章节
        updateChapter(){
            chapter.updateChapter(this.chapter)
                .then(response => {
                    //关弹窗
                    this.dialogChapterFormVisible=false
                    //提示
                    this.$message({
                        type: 'success',
                        message: '修改章节成功'
                    })
                    //刷新页面
                    this.getChapterVideo()
                })
        },
        saveOrUpdate(){
            if(this.chapter.id){
                this.updateChapter()
            }else{
                this.addChapter()
            }
            
        },
        // 根据课程id查询章节和小节
        getChapterVideo(){
            chapter.getAllChapterVideo(this.courseId)
                .then(response => {
                    this.chapterVideoList=response.data.allChapterVideo
                })
        },
        previous() {
            this.$router.push({path:'/course/info/'+this.courseId})
        },
        next() {
            this.$router.push({path:'/course/publish/'+this.courseId})
        }
    }
}
</script>